Add support for custom label components. #95
Conversation
| {{#if isLabel}} | ||
| <label class={{config.css.label}} for={{inputId}}> | ||
| {{label}}{{#if required}} {{requiredLabel}}{{/if}} | ||
| </label> |
| <span>{{label}}</span> | ||
| <span style="display: inline-block;"> | ||
| {{component (if labelComponent labelComponent "validated-label") label=label config=config inputId=inputId}} | ||
| </span> |
There was a problem hiding this comment.
This would render a <label> inside another <label> - which is not exactly what we want here, right?
Maybe it would make sense to use this style of checkbox labels instead:
<input type="checkbox" id="coding" name="interest" value="coding">
<label for="coding">Coding</label>(taken from MDN)
With this style, it seems that we could use labelComponent / validated-label exactly in the same way as with the other inputs. And it looks like all that needs to be changed is that the enclosing <label> tag has to be removed.
What do you think? 😄
There was a problem hiding this comment.
Edit: Just realized that this is what isLabel is supposed to do. What do you think about using the label for="..." syntax instead, so that we don't need isLabel?
| {{#if (or label labelComponent)}} | ||
| <span style="display: inline-block;"> | ||
| {{component (if labelComponent labelComponent "validated-label") | ||
| isLabel=true label=label config=config inputId=inputId required=required}} |
There was a problem hiding this comment.
I'd prefer always using {{component labelComponent}} and just setting the default value of labelComponent to 'validated-label'
PS: Sorry for not replying so long (Easter holidays 🥚) |
| {{label}}{{#if required}} {{requiredLabel}}{{/if}} | ||
| </label> | ||
| {{#if (or label (not-eq labelComponent 'validated-label'))}} | ||
| <span style="display: inline-block;"> |
There was a problem hiding this comment.
Edit: I think setting tagName: "span", on validated-label component is the cleanest way: is an inline element and doesn't destroy anything.
Ember is wrapping component render in <div id="ember..." class="ember-view"> </div>, but we want our label components to be inline with our input. So I have to add an inline-block style 😉
If you think thats ugly, then I can try this thing:
- https://stackoverflow.com/questions/23368862/ember-js-view-without-wrapping-div
- Add documentation for tagName: '' option on view. emberjs/ember.js#4790
, but from what I understood, it is not an official usage, so it might possibly be dangerous.
There was a problem hiding this comment.
Why not just use tagName: 'label' on the validated-label component and remove it from the template? The for and class can be easily mapped too. This results in a cleaner DOM since we have way less elements..
There was a problem hiding this comment.
Cool, I will do that!
|
Hi @przywartya, Oh, and would you mind also updating the README? |
|
Updated :) |
|
Looks great! Thanks for your awesome contribution 💯 |
No description provided.